<template>
	<view style="height: 100%;">
		<view class="divid_line_horizen"></view>
		<form @submit="formSubmit">
			<view style="height: 100%;">
				<scroll-view style="margin-bottom: 100rpx;" scroll-y="true">

					<!-- 个人信息 -->
					<view class="head_title">
						<text class="title">个人信息</text>
						<text class="tip">必选</text>
					</view>
					<view class="wrap">

						<c-edit-item label="姓名" :showarrow="false" :isrequre="true" placeholder="请输入"> </c-edit-item>

						<view class="item">
							<text style="color: #FF4848;">*</text>
							<text style="color: #666666;">性别</text>
							<u-radio-group style="position: absolute;right: 0;" v-model="value">
								<u-radio @change="gennderRadioChange" v-for="(item, index) in genderList" :key="index" :name="item.name"
								 :disabled="item.disabled">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>

						<c-edit-item label="出生年月" :isrequre="true" :disabled="true" @click="timePickerShow = true" placeholder="请选择">
						</c-edit-item>

						<c-edit-item label="最高学历" :isrequre="true" :disabled="true" @click="regionPickerShow = true" placeholder="请选择">
						</c-edit-item>

						<c-edit-item label="期望职位" :isrequre="true" :disabled="true" placeholder="请选择"> </c-edit-item>

						<c-edit-item label="期望薪资" :showarrow="false" placeholder="请输入"> </c-edit-item>

						<view v-if="showMore">
							<c-edit-item label="籍贯" :showarrow="false" placeholder="请输入"> </c-edit-item>

							<c-edit-item label="民族" :showarrow="false" placeholder="请输入"> </c-edit-item>

							<c-edit-item label="身高(cm)" :showarrow="false" placeholder="请输入"> </c-edit-item>

							<c-edit-item label="体重(kg)" :showarrow="false" placeholder="请输入"> </c-edit-item>

							<c-edit-item label="政治面貌" :showarrow="false" placeholder="请输入"> </c-edit-item>

							<c-edit-item label="身份证号码" :showarrow="false" placeholder="请输入"> </c-edit-item>

							<c-edit-item label="身份证住址" :showarrow="false" placeholder="请输入"> </c-edit-item>

							<c-edit-item label="期望薪资" :showarrow="false" placeholder="请输入"> </c-edit-item>

							<c-edit-item label="现住址" :showarrow="false" placeholder="请输入"> </c-edit-item>

							<view class="item">
								<text style="color: #666666;">是否为退伍军人</text>
								<u-radio-group style="position: absolute;right: 0;" v-model="value">
									<u-radio @change="armyRadioChange" type="army" v-for="(item, index) in defaultList" :key="index" :name="item.name">
										{{item.name}}
									</u-radio>
								</u-radio-group>
							</view>

							<view class="item">
								<text style="color: #666666;">是否为残疾人</text>
								<u-radio-group style="position: absolute;right: 0;" v-model="value">
									<u-radio @change="abledRadioChange" type="disabled" v-for="(item, index) in defaultList" :key="index" :name="item.name">
										{{item.name}}
									</u-radio>
								</u-radio-group>
							</view>

							<c-edit-item label="手机号" :showarrow="false" placeholder="请输入"> </c-edit-item>

							<c-edit-item label="紧急联系人电话" :showarrow="false" placeholder="请输入"> </c-edit-item>

							<c-edit-item label="到岗时间" :disabled="true" @click="timePickerShow = true" placeholder="请选择"> </c-edit-item>

							<c-edit-item label="技能证书/特长" :showarrow="false" placeholder="请输入"> </c-edit-item>
						</view>

						<view class="show_more" @click="updateItem">
							<text style="font-size30rpx;color: #54B4F5;">填写更多选项可增加入职成功率</text>
							<u-icon style="margin-left: 10rpx;" name="arrow-down" color="#54B4F5"></u-icon>
						</view>
					</view>

					<view style="height: 20rpx;background-color: #f9f9f9;"></view>
					<!-- 教育经历 -->
					<view class="head_title">
						<text class="title">教育经历</text>
					</view>
					<view class="wrap">

						<c-edit-item label="开始时间" :disabled="true" @click="timePickerShow = true" placeholder="请选择"> </c-edit-item>

						<c-edit-item label="结束时间" :disabled="true" @click="timePickerShow = true" placeholder="请选择"> </c-edit-item>

						<c-edit-item label="毕业院校" :disabled="true" @click="timePickerShow = true" placeholder="请选择"> </c-edit-item>

						<c-edit-item label="专业" :disabled="true" @click="timePickerShow = true" placeholder="请选择"> </c-edit-item>

						<c-edit-item label="学历" :disabled="true" @click="timePickerShow = true" placeholder="请选择"> </c-edit-item>

						<c-edit-item label="学籍" :disabled="true" @click="timePickerShow = true" placeholder="请选择"> </c-edit-item>
					</view>

					<view style="height: 20rpx;background-color: #f9f9f9;"></view>
					<!-- 工作描述 -->
					<view class="head_title">
						<text class="title">工作描述</text>
					</view>
					<view class="wrap">

						<c-edit-item label="开始时间" :disabled="true" @click="timePickerShow = true" placeholder="请选择"> </c-edit-item>

						<c-edit-item label="结束时间" :disabled="true" @click="timePickerShow = true" placeholder="请选择"> </c-edit-item>

						<c-edit-item label="公司名称" :showarrow="false" placeholder="请输入"> </c-edit-item>

						<c-edit-item label="职位名称" :showarrow="false" placeholder="请输入"> </c-edit-item>

					</view>

				</scroll-view>
			</view>
			<view class="bottom_btn">
				<button class="text" form-type="submit">确定</button>
			</view>
		</form>
		<u-picker mode="time" v-model="timePickerShow" :params="time_params" @confirm="timeConfirm"></u-picker>
		<u-picker mode="region" v-model="regionPickerShow" @confirm="regionConfirm"></u-picker>
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
		<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="regionConfirm"></u-select>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				showMore: false,
				timePickerShow: false,
				regionPickerShow: false,
				mode: "",
				time_params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				genderList: [{
					name: '男',
					disabled: false
				}, {
					name: '女',
					disabled: false
				}],
				defaultList: [{
					name: '是',
				}, {
					name: '否',
				}],
				value: ""
			}
		},
		methods: {
			updateItem(e) { //填写更多？？？
				console.log(e);
				this.showMore = !this.showMore
			},
			// 选中某个单选框时，由radio时触发
			gennderRadioChange(e) {
				console.log(e);
			},
			armyRadioChange(e) {
				console.log(e);
			},
			abledRadioChange(e) {
				console.log(e);
			},
			timeConfirm(e) {
				console.log(e);
			},
			regionConfirm(e) {
				console.log(e);
			},
			formSubmit: function(e) { //保存数据
				console.log(e);
			}

		}
	}
</script>

<style lang="scss" scoped>
	.scroll {
		width: 100%;
		height: 100%;
	}

	.head_title {
		height: 138rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		font-family: PingFangSC-Semibold, PingFang SC;

		.title {
			font-size: 36rpx;
			color: #333333;
		}

		.tip {
			margin-left: 16rpx;
			width: 40px;
			height: 20px;
			background: rgba(255, 72, 72, 0.1);
			border-radius: 2px;
			font-size: 24rpx;
			color: #FF4848;
			text-align: center;
			font-family: PingFangSC-Medium, PingFang SC;
		}
	}

	.wrap {
		padding: 0 30rpx 0 16rpx;
	}

	.item {
		height: 100rpx;
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: solid 2rpx #F2F2F2;

		.input {
			right: 60rpx;
			text-align: right;
			position: absolute;
			width: 520rpx;
			color: #333333;
		}
	}

	.show_more {
		display: flex;
		flex-direction: row;
		height: 100rpx;
		justify-content: center;
		align-items: center;
	}

	.bottom_btn {
		position: fixed;
		width: 100%;
		height: 120rpx;
		background-color: #eeeeee;
		bottom: 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;

		.text {
			width: 335px;
			height: 45px;
			background: linear-gradient(270deg, #1698F9 0%, #4CC5FC 100%);
			border-radius: 12rpx;
			color: #ffffff;
			font-size: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
